<template>
  <div class="item-input">
    <el-input-number
      id="InputNumber"
      style="width: 100%"
      v-bind="$attrs"
      v-model="Val"
      :controls="controls"
      @change="change ? change(Val) : none()"
    ></el-input-number>
  </div>
</template>

<script>
export default {
  name: "InputNumber",
  data() {
    return {
      Val: undefined,
    };
  },
  props: {
    value: {
      type: [Number, String],
      default: undefined,
    },
    // 默认不显示控制按钮，这个可以根据实际情况做调整
    controls: {
      type: Boolean,
      default: false,
    },
    change: {
      type: Function,
      default: () => () => {},
    },
  },
  watch: {
    Val: function (newVal) {
      this.$emit("update:value", newVal);
    },
    value: {
      handler: function (val) {
        this.Val = typeof val == "number" ? val : undefined;
      },
    },
  },
  methods: {
    none() {
      return false;
    },
  },
};
</script>


<style scoped lang="less">
#InputNumber {
  /deep/ .el-input__inner {
    text-align: left;
  }
}
</style>
